<template>
	<view class='p_30'>
		<!-- 订单信息 -->
		<view class='courseBox'>
			<view class='flex pb_30'>
				<view class='courseImg'>
					<image src='../../static/img_kecheng02.png'></image>
				</view>
				<view class='courseInfo'>
					<view>英语零基础直达</view>
					<view class='fs_26 color_9d'>讲师：Candy</view>
				</view>
			</view>
			<view class='justify_between topLine ptb_30 fs_26' @click="addCoupon">
				<view>添加优惠券/邀请码</view>
				<view class='coursemore'>
					<image src='../../static/more2.png'></image>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class='payTitle'>支付方式</view>
		<!-- #ifdef MP-WEIXIN -->
		<block v-for="(item, index) in selectPay" :key="index">
			<view class='payBox justify_between mt_2' @click="selectClick(index)">
				<view class='selectPay'>
					<image :src='item.img'></image>
					{{item.item}}
				</view>
				<view v-if="item.selectImage==true">
					<icon type="success_no_circle" size="20" />
				</view>
			</view>
		</block>
		<navigator url='' class='payBox mt_2'>
			<view class='color2'>使用新卡支付</view>
		</navigator>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<block v-for="(item, index) in HPay" :key="index">
			<view class='payBox justify_between mt_2' @click="hselect(index)">
				<view class='selectPay'>
					<image :src='item.img'></image>
					{{item.item}}
				</view>
				<view v-if="item.selectImage==true">
					<icon type="success_no_circle" size="20" />
				</view>
			</view>
		</block>
		<!-- #endif -->
		
		<view class='tips'>* 购买后，可以在“已购”进行查看和使用</view>

		<view class="prices">
			<view class="justify_between ptb_20 color_8E fs_28">
				<view>原价</view>
				<view>￥499</view>
			</view>
			<view class="justify_between ptb_20 fs_30">
				<view>应付金额</view>
				<view class="color_red">￥399</view>
			</view>
		</view>

		<navigator url='/pages/buySuccess/buySuccess' class='payBtn'>确认支付</navigator>

		<!-- 遮罩 -->
		<view class='mask' v-show='mask' @click="onMask"></view>
		<!-- 弹窗 -->
		<view class='popup' v-show='popup'>
			<view class="popTitle">使用优惠</view>
			<input placeholder="请输入会员邀请码或优惠码" class="popInput" />
			<view class="popBtns">
				<view class="color_8E" @click="onMask">取消</view>
				<view>添加</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mask: false,
				popup: false,
				// 微信支付
				selectPay: [{
						img: '../../static/icon_lingqian2x.png',
						item: '零钱(剩余￥2338.24)',
						selectImage: true
					},
					{
						img: '../../static/icon_gongshangyinhang2x.png',
						item: '工商银行储蓄卡(8524)',
						selectImage: false
					}
				],
				// H5支付
				HPay: [{
						img: '../../static/icon_WeChat.png',
						item: '微信支付',
						selectImage: true
					},
					{
						img: '../../static/icon_Alipay.png',
						item: '支付宝支付',
						selectImage: false
					}
				]
			}
		},
		methods: {
			addCoupon() {
				this.mask = !this.mask,
				this.popup = !this.popup
			},
			onMask() {
				this.mask = false,
				this.popup = false
			},
			
			// 微信支付
			selectClick: function(event) {
				for (var i = 0; i < this.selectPay.length; i++) {
					if (event == i) {
						this.selectPay[i].selectImage = true
					} else {
						this.selectPay[i].selectImage = false
					}
				}
			},
			// H5支付
			hselect: function(event) {
				for (var i = 0; i < this.HPay.length; i++) {
					if (event == i) {
						this.HPay[i].selectImage = true
					} else {
						this.HPay[i].selectImage = false
					}
				}
			},
		}
	}
</script>

<style>
	.courseBox {
		padding: 30rpx 30rpx 0;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.courseImg image {
		width: 220rpx;
		height: 162rpx;
	}

	.courseInfo {
		margin-left: 30rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.coursemore {
		color: #9D9D9D;
	}

	.coursemore image {
		width: 22rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	/* 支付方式 */
	.payTitle {
		margin-top: 60rpx;
		margin-bottom: 30rpx;
		color: #979797;
	}
	.payBox{
		padding: 30rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.selectPay image {
		width: 52rpx;
		height: 52rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.mt_2 {
		margin-top: 2rpx;
	}

	.color2 {
		color: #49548E;
	}

	.tips {
		font-size: 20rpx;
		color: #9F9F9F;
		margin-top: 20rpx;
	}

	.prices {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.payBtn {
		background-color: #2E90FF;
		color: #fff;
		margin-top: 50rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 2.55555556;
		border-radius: 5px;
	}

	/* 遮罩 */
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 8;
	}

	/* 弹窗 */
	.popup {
		position: absolute;
		top: 25%;
		left: 10%;
		right: 10%;
		background-color: #fff;
		border-radius: 10rpx;
		z-index: 9;
		padding: 0 30rpx;
	}

	.popTitle {
		text-align: center;
		padding: 30rpx 0;
		font-size: 34rpx;
	}

	.popInput {
		background-color: #F4F6F7;
		border-radius: 5rpx;
		padding: 15rpx 20rpx;
		font-size: 30rpx;
	}

	.popBtns {
		border-top: 1rpx solid #E8E8E8;
		margin-top: 30rpx;
		display: flex;
		line-height: 3;
	}

	.popBtns view {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
	}

	.popBtns view:last-child {
		border-left: 1rpx solid #E8E8E8;
		color: #1F7AFF;
	}
</style>
